<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Gratia</title>
    <link rel="stylesheet" href="index.css">
    </link>
</head>

<body>
    <div class="head">
        <div class="logo-box">
            <div class="restaurent-logo"><img src="Logo.png"></img></div>
            <div class="restaurent-name">Gratia</div>
        </div>
        <div class="navigation">
            <div class="navi-title">About</div>
            <div class="navigation-title">Menu</div>
            <div class="navi-title">Gallery</div>
            <div class="navi-title">Contact</div>
        </div>
    </div>
    <div class="wrapper">
        <div class="title">

            <div class="title-header">Menu</div>
            <div class="title-desc">
                <span id="span1">Lorem ipsum dolor sit amet,consectetur adipiscing elit</span>
            </div>
        </div>
        <div class="gallery-top">
            <div>
                <img class="G" src="Main Dishes.png" style="width: 100%;height: 70%;"></img>
                <p1 style="height: 10%;width: 100%;text-align:center">
                    Main Dishes
                </p1>
                <p style="height: 10%;width: 100%;text-align:center">
                    <span id="span1">Lorem ipsum dolor sit amet,consectetur adipiscing elit<span>
                </p>
            </div>

            <div>
                <img class="G" src="Soups.png" style="width: 100%;height: 70%;"></img>
                <p1 style="height: 10%;width: 100%;text-align:center">
                    Soups
                </p1>
                <p style="height: 10%;width: 100%;text-align:center">
                    <span id="span1">Lorem ipsum dolor sit amet,consectetur adipiscing elit<span>
                </p>
            </div>
            <div>
                <img class="G" src="Hamburgers.png" style="width: 100%;height: 70%;"></img>
                <p1 style="height: 10%;width: 100%;text-align:center">
                    Hamburgers
                </p1>
                <p style="height: 10%;width: 100%;text-align:center">
                    <span id="span1">Lorem ipsum dolor sit amet,consectetur adipiscing elit<span>
                </p>
            </div>
        </div>


        <div class="gallery-bottom">
            <div>
                <img class="G" src="Desserts.png" style="width: 100%;height: 70%;"></img>
                <p1 style="height: 10%;width: 100%;text-align:center">
                    <center>Desserts </center>
                </p1>
                <p style="height: 10%;width: 100%;text-align:center">
                    <span id="span1">Lorem ipsum dolor sit amet,consectetur adipiscing elit<span>
                </p>
            </div>
            <div>
                <img class="G" src="Barbecue.png" style="width: 100%;height: 70%;"></img>
                <p1 style="height: 10%;width: 100%;text-align:center">
                    <center>Barbecue</center>
                </p1>
                <p style="height: 10%;width: 100%;text-align:center">
                    <span id="span1">Lorem ipsum dolor sit amet,consectetur adipiscing elit<span>
                </p>
            </div>
            <div>
                <img class="G" src="Salads.png" style="width: 100%;height: 70%;"></img>
                <p1 style="height: 10%;width: 100%;text-align:center">
                    <center>Salads </center>
                </p1>
                <p style="height: 10%;width: 100%;text-align:center">
                    <span id="span1">Lorem ipsum dolor sit amet,consectetur adipiscing elit<span>
                </p>
            </div>
        </div>
        <div class="tab"></div>
        <div class="footer">
            <div class="footer title">
                <center><img style=" width: 30px;height: 30px" src="Logo.png"></img></center>
            </div>
            <div style="font-size: 20px;margin: 5px;">
                Menu
            </div>
            <div style="font-size: 10px;margin-bottom: 20px;">
                <span id=span1>Copright 2016 All rights recieved by symu</span>
            </div>
            <hr style="width: 100px;" />
            <div>
                <img src="TR.png"></img>
                <img src="IG.png"><img>
                <img src="FB.png"></img>
            </div>
        </div>